<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>残疾人核验</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="./static/elementui.css">
</head>

<body>
    <div id="app">

        <el-row type="flex" justify="center">
            <el-col :span="3"></el-col>
            <el-col :span="18">
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1"  @click="changeTab(1)">残疾人列表</el-menu-item>
                    <el-menu-item index="2" @click="changeTab(2)">待核验</el-menu-item>
                     <!-- <el-menu-item index="3" @click="changeTab(3)">验证码错误</el-menu-item> -->
                    <el-menu-item index="4" @click="changeTab(4)">数据统计</el-menu-item>
                </el-menu>


            </el-col>
           
        </el-row>
        <el-row type="flex" justify="center">
            <el-col :span="8">
                <el-row style="padding-top:10px;">
                    <el-table v-loading="loadingTable" max-height="500" ref="multipleTable" empty-text="没有数据"
                        :data="tableData" @selection-change="handleSelectionChange" border stripe
                        style="width: 100%;margin-top:10px;">
                        <el-table-column prop="code" label="类别" width="200"></el-table-column>
                        <el-table-column prop="num" label="数量"></el-table-column>
                    </el-table>
                </el-row>
            </el-col>
        </el-row>

        <el-dialog title="身份证错误" :visible.sync="dialogTableVisible">
            <div>{{errsMsg}}</div>
        </el-dialog>
    </div>

    <!-- import Vue before Element -->
    <script src="./static/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="./static/elementui.js"></script>
    <!-- import axios -->
    <script src="./static/axios.min.js"></script>
    <!-- import cookie -->
    <script src="./static/js.cookie.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    activeIndex2: '4',

                    selTown: "",
                    keyword: "",
                    towns: [],

                    tableData: [],
                    multipleSelection: [],

                    page: 1,
                    pageSize: 10,
                    type: 'all',
                    count: 0,

                    uploading: false,
                    dialogTableVisible: false,
                    errsMsg: '',

                    uploadingAll: false,
                    uploadingRepeat: false,
                    loadingTable: false,
                    loadingDeleteRepeat: false,
                    loadingCheckRepeat: false,
                    loadingNatOut: false,
                    loadingExportNatOut: false
                }
            },
            created() {
                console.log('login', Cookies.get('login'))
                if (Cookies.get('login') != 'true') {
                    window.location.href = './login.html'
                } else {
                    this.getList()
                    this.getTownList()
                }
            },
            methods: {
                changeTab(type) {
                    console.log(type);
                    if (type == 2) {
                        window.location.href = "./uncheck.html"
                    } else if (type == 3) {
                        window.location.href = "./index.html"
                    } else if (type == 4) {
                        window.location.href = "./count.html"
                    } else {
                         window.location.href = "./index.html"
                    }
                },
                search() {
                    this.getList()
                },
                handleCurrentChange(e) {
                    console.log(e)
                    this.getList()
                },
                handleSizeChange(val) {
                    this.pageSize = val
                    this.getList()
                },
                handleSelect(key, keyPath) {
                    console.log(key, keyPath)
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val
                },
                refresh() {
                    this.type = 'all'
                    this.page = 1
                    this.getList()
                    this.getTownList()
                },
                exportAll() {
                    this.uploadingAll = true
                    axios.get('/export_nat_town').then((res) => {
                        this.uploadingAll = false
                        console.log(res.data.url)
                        // window.open(res.data.url)
                        window.location.href = res.data.url
                    })
                },
                exportRepeat() {
                    this.uploadingRepeat = true
                    axios.get('/export_nat_repeat_excel').then((res) => {
                        this.uploadingRepeat = false
                        console.log(res.data)
                        window.location.href = res.data.url
                    })
                },
                exportNatOut() {
                    this.loadingExportNatOut = true
                    axios.get('/export_nat_out').then((res) => {
                        this.loadingExportNatOut = false
                        console.log(res.data)
                        window.location.href = res.data.url
                    })
                },
                getList() {
                    this.loadingTable = true
                    axios.get('/get_count', {
                        params: {
                            type: this.type,
                            page: this.page,
                            pageSize: this.pageSize,
                            town: this.selTown,
                            keyword: this.keyword
                        }
                    }).then((res) => {
                        this.loadingCheckRepeat = false
                        this.loadingTable = false
                        let data = res.data
                        if (data.code == 1) {
                            this.tableData = data.data
                            console.log(this.tableData)
                            this.count = data.count
                        }
                    })
                },
                getTownList() {
                    // axios.get('/get_nat_town_list').then((res) => {
                    //     let data = res.data
                    //     if(data.code == 1) {
                    //         this.towns = data.towns
                    //     }
                    // })
                },
                checkRepeat() {
                    this.loadingCheckRepeat = true
                    this.type = 'repeat'
                    this.getList()
                },
                uploadProgess() {
                    this.uploading = true
                },
                uploadSuccess(res) {
                    this.uploading = false

                    if (res.code == 2) {
                        let msg = '导入失败！'
                        if (res.msg) {
                            msg = res.msg
                        }
                        this.$message({ message: msg, type: 'error' })
                        // this.dialogTableVisible = true
                        // this.errsMsg = res.errs
                    } else {
                        this.$message({ message: '导入成功！', type: 'success' })
                        this.refresh()
                    }
                },
                updateNatOut() {
                    this.loadingNatOut = true
                    axios.get('/update_nat_out').then((res) => {
                        this.loadingNatOut = false
                        console.log(res)
                        let data = res.data
                        if (data.code == 1) {
                            this.$message('更新成功！')
                            this.page = 1
                            this.type = 'out'
                            this.getList()
                        }
                    })
                },
                deleteRepeat() {
                    this.loadingDeleteRepeat = true
                    axios.get('/delete_nat_repeat').then((res) => {
                        this.loadingDeleteRepeat = false
                        console.log(res)
                        let data = res.data
                        if (data.code == 1) {
                            this.$message('一键删除重复成功！')
                            this.page = 1
                            this.getList()
                        }
                    })
                },
                delRow() {
                    let list = this.multipleSelection
                    console.log(this.multipleSelection)
                    if (list.length > 0) {
                        let dels = '0'
                        list.forEach(e => {
                            dels += ',' + e.id
                        })

                        axios.get('/delete', {
                            params: {
                                dels: dels
                            }
                        }).then((res) => {
                            let data = res.data
                            if (data.code == 1) {
                                this.$message('删除成功！')
                                this.getList()
                            } else {
                                this.$message('删除失败！')
                            }
                        })

                        console.log(dels)
                    } else {
                        this.$message({ message: '没有勾选删除行！', type: 'warning' })
                    }
                },
                delAll() {
                    this.$confirm('此操作将永久删除核酸检测库所有数据, 是否继续?', '清空确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get('/delete_nat_all').then((res) => {
                            let data = res.data
                            if (data.code == 1) {
                                this.$message('清空成功！')
                                this.getList()
                            } else {
                                this.$message('清空失败！')
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消清空'
                        });
                    });
                },
                changePage(type) {
                    if (type == 'up') {
                        if (this.page > 2) {
                            this.page--
                        }
                    } else {
                        this.page++
                    }
                    this.getList()
                },
            },
        })
    </script>
</body>

</html>